<template>
  <ul class="list">
    <li v-for="(label, index) in subLabelList" :key="index"
        class="item"
        :class=" selectedTag.id === label.id ? 'selected' : '' "
        @click.left="toggle(label)"
        @contextmenu.prevent="visible=true"
    >
      <div class="icon-wrapper">
        <Icon :name="label.name" class="icon"></Icon>
      </div>
      <span class="text">{{label.text}}</span>
      <a-modal
        title="请编辑类别名称"
        destroyOnClose
        okText="修改"
        :visible="visible"
        @ok="handleAccountOk(label)"
        @cancel="handleCancel">
        <a-input :placeholder="label.text"
                 :maxLength='4'
                 allowClear
                 defaultValue="1234"
                 v-model="tagName"
                 id="input">
        </a-input>
        <a-button type="danger" @click="deleteTag(label.id)" style="width: 80px">
          删除标签
        </a-button>
      </a-modal>
    </li>
    <slot></slot>
  </ul>
</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component, Prop} from 'vue-property-decorator';
  import {Modal, Input, Button} from 'ant-design-vue';

  Vue.use(Button)

  @Component({
    components: {Modal, Input, Button}
  })
  export default class DynamicLabel extends Vue {
    @Prop({required: true}) subLabelList!: Tag[];

    get selectedTag(){
      return this.$store.state.cur_record.tag;
    }

    toggle(label: Tag) {
      if (!this.selectedTag || this.selectedTag !== label) {
        this.$store.state.cur_record.tag = label;
      }
    }

    visible = false;
    tagName = '';

    handleAccountOk(label: Tag) {
      if(this.tagName === '') {
        this.visible = false;
        return;
      }
      const payload = {id: label.id, text: this.tagName};
      this.$store.commit('updateTags', payload);
      this.visible = false;
    }

    deleteTag(id: string) {
      this.$store.commit('deleteTag', id);
      this.visible = false;
    }

    handleCancel(){
      this.visible = false
    }
  }
</script>

<style lang='scss' scoped>
  @import "~@/assets/style/helper.scss";

  .list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    padding-bottom: 20px;

    > .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 20%;
      padding: 10px 0;

      &.selected > .icon-wrapper {
        background: $color-highLight;
        color: white;
      }

      > .icon-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3em;
        height: 3em;
        border-radius: 50%;

        > .icon {
          width: 2em;
          height: 2em;
        }
      }

      > .text {
        padding: 5px 0;
      }
      > button{
        padding: 5px 10px;
      }
    }
  }
</style>
